<template>
  <div>
    <div class="w-max ct bgwh mb30 ovh border-eee">
      <div class="newopro-l fl">
        <a href="">
          <img src="../../static/images/new/xinpin.jpg" width="224" height="478">
        </a>
      </div>
      <div class="newopro-r fr">
        <h2 class="index-tt clearfix">
          <em class="ft18 c000 fl">刚出炉新品</em>
          <router-link to="/app/home/list/more" target=_blank><a class="fr c666">更多&gt;&gt;</a></router-link>
        </h2>
        <ul class="newgoods_fastbuy">
          <li class="prolist-cent clearfix have_num" v-for="item in newopro">
            <div class="prolist-l fl">
              <router-link :to="'/app/home/productDetail/'+item.id" target=_blank><a :title="item.title" class="imgBox">
                <img :src="item.img" style="height: 158px;width: 158px;" class="zom" :alt="item.img">
              </a></router-link>
            </div>
            <div class="prolist-r fl">
              <h3 class="ft14 c333 bold">
                <router-link :to="'/app/home/productDetail/'+item.id" :title="item.title" target=_blank>{{item.title}}
                </router-link>
              </h3>
              <p><em class="c333"></em>{{item.brief}}</p>
              <div>
                <span class="p-price"><em class="fastbuy_price">￥{{item.price}}元</em><del>原价:￥{{item.oldPrce}}元</del></span>
                <a href="" class="p-buy fr ibg">立即抢购</a>
                <span class="p-time fr">销量：{{item.sales}}件</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>
<script>
    import {getGoods} from '../../api/api';

    export default {
        data() {
            return {
                newopro: {}
            }
        },
        methods: {
            getOpro() {
                // getGoods({
                //   "is_new": 1
                // })
                //   .then((response) => {
                //     //跳转到首页页response.body面
                //     this.newopro = response.data.results
                //   })
                //   .catch(function (error) {
                //     console.log(error);
                //   });

                //mock
                this.$http.get("/getOpro").then(res => {
                    this.newopro = res.data.list;
                })
            }
        },
        created() {
            this.getOpro();
        }

    }
</script>
<style lang='scss'>
  html {
    /*background:#fafafa;*/
    color: #333;
    _background-attachment: fixed
  }

  body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, button, input {
    margin: 0;
    padding: 0
  }

  body, button, input {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, simsun
  }

  em, i {
    font-style: normal
  }

  ul {
    list-style: none
  }

  img {
    border: 0
  }

  h1 {
    font-size: 18px
  }

  h2 {
    font-size: 14px;
    font-weight: bold
  }

  h3 {
    font-size: 14px;
    font-weight: 400
  }

  h4, h5 {
    font-size: 12px;
    font-weight: 400
  }

  input, button {
    font-size: 12px;
    outline: 0;
    resize: none;
    color: #333
  }

  button {
    cursor: pointer
  }

  a {
    text-decoration: none;
    color: #333;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -o-transition: color .2s;
    -ms-transition: color .2s;
    transition: color .2s
  }

  a:hover {
    color: #09c762
  }

  a:focus, area:focus {
    outline: 0
  }

  ::selection {
    background: #09c762;
    color: #fff
  }

  canvas {
    -ms-touch-action: double-tap-zoom
  }

  /*@font-face {
      font-family:'lizi';
      src:url('http://at.alicdn.com/t/font_1412819191_5742776.eot');
      src:url('http://at.alicdn.com/t/font_1412819191_5742776.eot?#iefix') format('embedded-opentype'),url('http://at.alicdn.com/t/font_1412819191_5742776.woff') format('woff'),url('http://at.alicdn.com/t/font_1412819191_5742776.ttf') format('truetype'),url('http://at.alicdn.com/t/font_1412819191_5742776.svg#iconfont') format('svg')
  }*/
  .red, a.red, a.red:hover, .pink, a.pink, a.pink:hover {
    color: #09c762;
  }

  .gray999, .gray, a.gray, a.gray:hover {
    color: #999;
  }

  .w-max {
    background: #fff;
    width: 1200px;
  }

  .ct {
    margin: 0 auto;
  }

  .mb30 {
    margin-bottom: 30px;
  }

  .ovh {
    overflow: hidden;
  }

  .border-eee {
    border: 1px solid #eee;
  }

  .newopro-l {
    width: 224px;
    height: 478px;
  }

  .newopro-l {
    width: 224px;
    /*height: 478px;*/
  }

  .newopro-l img {
    width: 224px;
    height: 478px;
  }
  .newopro-r{
    width: 940px;
    padding: 0 10px;
    /*height: 478px;*/
  }
  .fl {
    float: left
  }

  .fr {
    float: right;
  }

  .index-tt {
    text-align: right;
    line-height: 60px;
  }

  .ft18 {
    font-size: 18px;
  }

  .c000 {
    color: #000;
  }

  .c333 {
    color: #333;
  }

  .prolist-cent {
    padding: 15px 0 30px;
    border-bottom: 1px solid #eee;
  }

  .prolist-cent:last-child {
    border-bottom: none;
  }

  .clearfix:after, .clear_f:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: '\20';
    clear: both;
    height: 0;
  }

  .clearfix {
    *zoom: 1;
  }

  .prolist-l {
    padding: 0 50px;
  }

  .prolist-l .imgBox {
    width: 158px;
    height: 158px;
  }

  .prolist-r {
    padding-left: 15px;
    width: 655px;
  }

  .prolist-r h3 {
    line-height: 34px;
  }

  .prolist-r p {
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    color: #999;
  }

  .prolist-r div {
    line-height: 56px;
    padding-top: 12px;
  }

  .ft14 {
    font-size: 14px;
  }

  .bold {
    font-weight: bold;
  }

  .p-price {
    color: #f40;
  }

  .p-price i {
    font-size: 20px;
  }

  .p-price em {
    font-size: 28px;
    margin-right: 10px;
  }

  .p-time .ibg {
    width: 17px;
    height: 17px;
    background-position: 0 -17px;
    margin-right: 5px;
  }

  .ibg {
    /* background: url(images/indexico.png) no-repeat;*/
    display: inline-block;
  }

  .p-buy:hover {
    color: #fff;
  }

  .p-buy {
    width: 188px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-indent: 78px;
    background-position: 0 -36px;
    margin-left: 25px;
  }

  .p-buy:hover {
    text-decoration: none;
  }

</style>
